<template>
  <div>
    <!-- 搜索结果页面头部 -->
    <van-nav-bar title="搜索结果" left-arrow @click-left="$router.go(-1)" fixed/>
    <!-- 搜索结果页面头内容 -->
    <div style="padding-top:1.22666rem">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ArticleItem
          v-for="obj in articleList"
          :key="obj.art_id"
          :artObj="obj"
          @click.native="artDetailFn(obj.art_id)"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
    </div>
  </div>
</template>

<script>
// 10. 搜索结果页面铺设
// 头部navbar内容区复用首页的文列表item
// 引入注册使用item组件
// 封装获取结果的方法，在初始化时调用获取数据，将数据赋值给内部变量
// 在item标签上循环铺设数据，并将obj传给子组件
// 11. 去掉搜索结果页面的反馈按钮X
// 在item里面反馈按钮上使用v-show控制，定义显示变量(默认false，类型为布尔值)
// 修改文章列表list,给item传值，值为true
// 12. 触底刷新
// 使用van-list组件包裹item
// 定义变量，封装获取文章列表的方法******
// 定义当前页码page=1，触底加载onload事件中 page++,调用上述方法
// 将获取的数据合并到当前文章列表中，进行数据更新，将Loading改为false
// 判断获取数据为空时，将finished改为true
// 13.下拉刷新
//
// 14. 跳转文章详情
// 创建文章搜索结果点击文章详情页面，并设置路由规则(一级路由)
// 首页点击文章和进入详情
// 将点击事件绑定在item组件上，(在组件上绑定的事件都是自定义事件，必须用$emit触发，也可以直接添加.native)
// 在点击事件中跳转传参 this.router.push()，参数path，query
// 也在文章列表页面list中同样绑定事件

import { getSearchResultApi } from '@/api'
import ArticleItem from '@/components/ArticleItem'
export default {
  name: 'SearchResult',
  data () {
    return {
      articleList: [],
      loading: false, // 触底加载状态
      finished: false,
      page: 1,
      isLoading: false //  下拉刷新状态
    }
  },
  // 初始化后获取文章列表
  async created () {
    this.getArticleList()
  },
  methods: {
    // 获取文章列表的方法
    async getArticleList () {
      const res = await getSearchResultApi({
        // 路径上的参数使用params
        keywords: this.$route.params.keywords,
        page: this.page
      })
      // console.log(res)
      // 合并数据
      if (res.data.data.results.length === 0) {
        this.finished = true
      }
      this.articleList = [...this.articleList, ...res.data.data.results]
      this.loading = false
    },
    // 触底加载
    onLoad () {
      if (this.articleList.length > 0) {
        this.page++
        this.getArticleList()
      }
    },
    // 下拉刷新
    onRefresh () {
      this.articleList = []
      this.getArticleList()
      this.isLoading = false
    },
    // 点击文章跳转到文章详情页
    artDetailFn (id) {
      // 跳转相应的文章详情页
      this.$router.push({
        path: '/article_detail',
        query: {
          artId: id
        }
      })
    }
  },
  components: {
    ArticleItem
  }
}
</script>

<style></style>
